<script lang="ts" setup>
// #region 引入包, 函数和组件
import type { CommentPlaylistReponse } from "@/services/type";
import { ref } from "vue"
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const props = defineProps<{
  list: CommentPlaylistReponse | undefined
}>()
// #endregion

// #region // 变量
const pop = ref<{
  open: (type: "bottom") => void
  close: () => void
} | null>(null) // 弹窗的实例
// #endregion

// #region // 函数
const open = () => {
  if (!pop.value) return
  pop.value.open('bottom')
}
const close = () => {
  if (!pop.value) return
  pop.value.close()
}
// #endregion

// #region // 生命周期和vue函数
defineExpose({
  open,
  close
})
// #endregion
</script>

<template>
  <uni-popup
    type="bottom"
    ref="pop"
  >
    <scroll-view class="empty" v-if="!list || !list.comments.length && !list.hotComments.length && !list.topComments.length">暂无评论...</scroll-view>
    <scroll-view class="main" scroll-y v-else>
      <view class="hots" v-if="list.hotComments.length">
        <uni-section class="title" type="line" title="热门评论"></uni-section>
        <view class="item" v-for="item in list.hotComments" :key="item.commentId">
          <image class="avatar" :src="item.user.avatarUrl"></image>
          <view class="name">{{ item.user.nickname }}</view>
          <uni-icons type="forward" color="#999999"></uni-icons>
          <view class="content">{{ item.content }}</view>
        </view>
      </view>
      <view class="news" v-if="list.comments.length">
        <uni-section class="title" type="line" title="最新评论"></uni-section>
        <view class="item" v-for="item in list.comments" :key="item.commentId">
          <image class="avatar" :src="item.user.avatarUrl"></image>
          <view class="name">{{ item.user.nickname }}</view>
          <uni-icons type="forward"  color="#999999"></uni-icons>
          <view class="content">{{ item.content }}</view>
        </view>
      </view>
    </scroll-view>
  </uni-popup>
</template>

<style lang="scss" scoped>
.title {
  :deep(.line) {
    background-color: #c84341;
  }
}
.uni-popup {
  height: 100%;
}
.empty,
.main {
  background: #fff;
  height: 60vh;
}
.empty {
  text-align: center;
  line-height: 200rpx;
  color: #999;
}
.item {
  display: grid;
  padding: 24rpx;
  padding-left: 30rpx;
  grid-template-columns: 80rpx auto 72rpx;
  grid-template-rows: 38rpx auto;
  grid-row-gap: 6rpx;
  border-top: 2rpx solid #f1f1f1;
  .avatar {
    grid-row: span 2;
    width: 50rpx;
    height: 50rpx;
    margin-top: 12rpx;
    border-radius: 25rpx;
  }
  .name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: $uni-font-size-base;
    color: #3b4144;
  }
  .uni-icons {
    grid-row: span 2;
    display: flex;
    align-items: center;
    justify-content: end;
  }
  .content {
    font-size: $uni-font-size-sm;
    color: #999;
  }
}
</style>
